import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, Radio, message } from 'antd';
import { useNavigate } from 'react-router-dom';

import './style.scss'
import { loginRequest } from '@/apis/admin';
import { storeAll } from '@/store';
import back from '@/assets/img/login-bg.be83cd61.svg'
import titleBac from '@/assets/img/account-logo.0a6f895e.png'

const App: React.FC = () => {
	const navigate = useNavigate()

	const onFinish = (values: any) => {
		loginRequest(values).then((re: any) => {
			if (re.status === 401) {
				message.error('用户名或密码错误')
			} else {
				window.localStorage.setItem('graduation_yzh_token', re.token)
				storeAll.adminStore.setToken(re.token)
				storeAll.adminStore.setAdminInfo(re.adminInfo)
				message.success(re.message)
				navigate('/homepage')
				switch (re.adminInfo.role) {
					case 0: {
						storeAll.parkingLotTypeStore.getParkingLotTypeRequest()
						storeAll.parkingStore.getParkingLot()
						storeAll.usersStore.getUsers()
						storeAll.carsStore.getCars()
						storeAll.notesStore.getNotes()
						storeAll.mainTenance.getMaintenances()
						storeAll.mainTenancer.getMaintenancers()
						break
					}
					case 2: {
						break
					}
					case 3: {
						break
					}
				}
			}
		})
	};

	return (
		<div className="loginWrap">
			<div className="back"><img className="back" src={back} alt="" /></div>
			<div className="right">
				<img src={titleBac} alt='' className="titleBac"></img>
				<h1>停车场管理系统</h1>
				<div className="loginFromWrap">
					<Form
						name="normal_login"
						className="login-form"
						onFinish={onFinish}
					>
						<Form.Item label="角色" name="role" rules={[{ required: true, message: '请选择角色' }]}>
							<Radio.Group>
								<Radio.Button value={0}>普通管理员</Radio.Button>
								<Radio.Button value={1}>超级管理员</Radio.Button>
								<Radio.Button value={2}>维修员</Radio.Button>
							</Radio.Group>
						</Form.Item>
						<Form.Item
							name="username"
							rules={[{ required: true, message: '请输入用户名' }]}
						>
							<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
						</Form.Item>
						<Form.Item
							name="password"
							rules={[{ required: true, message: '请输入密码' }]}
						>
							<Input
								prefix={<LockOutlined className="site-form-item-icon" />}
								type="password"
								placeholder="Password"
							/>
						</Form.Item>
						<Form.Item>
							<Button type="primary" htmlType="submit" className="login-form-button">
								Log in
							</Button>
						</Form.Item>
					</Form>
				</div>
			</div>
		</div>
	);
};

export default App;